<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>特色化案例库</title>

  <script src="/jquery.js"></script>


  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>
  <script src="/md5.js"></script>
  <script src="/vue.js"></script>
  <script src="/httpVueLoader.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <script src="/axios.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: auto;
    }

    #header {
      height: 8%;
    }

    #body {
      height: auto;
      min-width: 1000px;
    }

    #myTabContent {
      height: 800px;
    }

    #main {
      width: 100%;
      height: auto;
      margin: 0 auto;
      height: auto;
    }

    #home,
    #assess,
    #piclib {
      height: 100%;
    }

    .el-tree-node__content {
      height: 50px;
    }

    .el-upload {
      margin: 0 auto;
    }

    .upload-demo {
      text-align: center;
    }

    input[name="file"] {
      display: none;
    }

    .el-select {
      margin-bottom: 20px;
    }
  </style>
</head>

<body>
  <div id="main" class="panel panel-default">
    <div class="panel-heading" id="header">
      <span style="font-size: 25px;">
        特色化案例库
      </span>
      <span><a href="http://114.242.236.148:32107" target="_blank">文件服务器</a></span>
      <div style="width: auto;height: auto;float: right">
        <span>你好，{{username}}</span>
        <el-popover placement="top-start" :title="username" width="200" trigger="hover" content="">
          <el-button type="danger" @click="logout">登出</el-button>
          <el-button slot="reference" circle><i class="el-icon-user"></i></el-button>
        </el-popover>
      </div>
    </div>
    <div class="panel-body" id="body" style="height:auto">
      <ul id="myTab" class="nav nav-tabs">
        <li class="active">
          <a href="#home" data-toggle="tab">
            我的任务
          </a>
        </li>
        <li><a href="#results" data-toggle="tab">搜索结果</a></li>
        <!--<li><a href="#assess" data-toggle="tab">测评指标</a></li>-->

        <!--
                <li class="dropdown">
                    <a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown">案例库
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
                        <li><a href="#jmeter" tabindex="-1" data-toggle="tab">知识图谱</a></li>
                        <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
                    </ul>
                </li>
                -->
      </ul>
      <div id="myTabContent" class="tab-content" style="height:auto">
        <div class="tab-pane fade in active" id="home">
          <mytask></mytask>
        </div>
        <div class="tab-pane fade" id="results">
          <results></results>
        </div>
        <!--<div class="tab-pane fade" id="assess">
                </div>-->
      </div>
    </div>
  </div>
  <footer class="bs-docs-footer" style="background-color: rgb(77, 74, 74);height:150px">
    <div class="container" style="height:100%">
      <br>
      <p style="color: white;margin:0"></span>By
        <span class="glyphicon glyphicon-heart" style="color: white;"></span>sillytortoise
      </p><br>
      <span style="color:white">
        Based on Golang&Vue.js</span>
      <span style="color:white;margin-left:100px">
        项目地址：<a href="https://gitee.com/sillytortoise/caselib" target="view_window"
          style="color: white;">https://gitee.com/sillytortoise/caselib</a></span>
    </div>
  </footer>
</body>



</html>

<script>
  const task = new Vue({
    el: "#home",
    components: {
      'mytask': httpVueLoader('/task.vue')
    }
  })
  /*
  const assess = new Vue({
      el: "#assess",
      components: {
          'myassess': httpVueLoader('/assess.vue')
      }
  })*/

  const results = new Vue({
    el: "#results",
    components: {
      'results': httpVueLoader('/results.vue'),
    }
  })

  const pic = new Vue({
    el: "#piclib",
    components: {
      'pics': httpVueLoader('/pics.vue')
    }
  })

  const picsearch = new Vue({
    el: "#picsearch",
    components: {
      picfilter: httpVueLoader("/picfilter.vue"),
    },
    data: {
      total: 0,
      imgs: [],
      currentPage: null,
      selectpic: null,
      cons: [],    //筛选条件
      loading: false
    },
    created: function () {
      /* {
          total:...,
          imgs:[     每一页显示的图片
              {
                  path:...,
                  bank:...,
                  ver:...
              },
              {
                  path:...,
                  bank:...,
                  ver:...
              },
              ...
          ]
      }
      */
      this.loading = true;

      axios.post(`/imgs?p=1`, []).then((res) => {
        this.total = res.data.total;
        this.imgs = res.data.imgs;
        this.loading = false;
      });
    },
    methods: {
      /*改变页数*/
      handleCurrentChange(val, callback) {
        let app;
        let ver;
        if (val.length > 0) {
          app = val[0];
        } else {
          app = "";
        }
        if (val.length === 2) {
          ver = val[1];
        } else {
          ver = "";
        }
        this.loading = true;
        axios
          .post(`/imgs?p=${val}`, this.cons)
          .then((res) => {
            this.imgs = res.data.imgs;
            this.total = res.data.total;
            this.currentPage = val;
            this.loading = false;
            if (callback != null) {
              callback();
            }
          });
      },
      /*改变筛选条件*/
      applyCons(val) {
        //axios 新的条件请求图片
        this.cons = val;
        this.loading = true;
        axios.post(`/imgs?p=1`, val).then((res) => {
          this.imgs = res.data.imgs;
          this.total = res.data.total;
          this.currentPage = 1;
          this.loading = false;
        });

      },
      dropimg(path) {
        axios.get(`/dropimg?path=${path}`).then(res => {
          this.$message({
            type: 'success',
            message: res.data,
            duration: 2000
          });
          this.loading = true;

          this.handleCurrentChange(this.currentPage, () => {
            if (this.imgs == null && this.currentPage > 1) {
              this.handleCurrentChange(this.currentPage - 1);
            }

          });

        })
      }
    },


  })

  const header = new Vue({
    el: "#header",
    created: function () {
    },
    computed: {
      username: function () {
        var arr, reg = new RegExp("(^| )username=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg))
          return decodeURI(arr[2]);
        else
          return null;
      }
    },
    methods: {
      logout: function () {
        document.cookie = "username='';password='';expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
        window.location.href = "/signin.html";
      }
    },
  })

</script>